<template>
  <div class="guide">
    <div class="head">
      <p>
        <i class="fa fa-paper-plane" aria-hidden="true"></i> User Guide</p>
    </div>
    <div class="wrap">
      <div class="block">
        <img src="../assets/02.jpg">
        <div class="text">
          <p class="title">钱包插件</p>
          <p>为了让DApp与区块链进行交互，需要通过钱包插件作为桥梁：</p>
          <p>
            <i class="fa fa-desktop fa-fw fa-2x" aria-hidden="true"></i> Web端，请使用Chrome浏览器，并安装
            <a href="https://chrome.google.com/webstore/detail/nasextwallet/gehjkhmhclgnkkhpfamakecfgakkfkco">WebExtensionWallet </a>扩展；</p>
          <p>
            <i class="fa fa-mobile fa-fw fa-2x" aria-hidden="true"></i> &nbsp;移动端，请安装
            <a href="https://nano.nebulas.io/">NAS nano</a>。</p>
        </div>
      </div>
      <div class="block">
        <img src="../assets/03.jpg">
        <div class="text">
          <p class="title">星云跑者</p>
          <p>为了让DApp与区块链进行交互，需要通过钱包插件作为桥梁：</p>
          <p>
            <i class="fa fa-desktop fa-fw fa-2x" aria-hidden="true"></i> Web端，请使用Chrome浏览器，并安装
            <a href="https://chrome.google.com/webstore/detail/nasextwallet/gehjkhmhclgnkkhpfamakecfgakkfkco">WebExtensionWallet </a>扩展；</p>
          <p>
            <i class="fa fa-mobile fa-fw fa-2x" aria-hidden="true"></i> &nbsp;移动端，请安装
            <a href="https://nano.nebulas.io/">NAS nano</a>。</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.wrap {
  max-width: 1200px;
  margin: 20px auto 300px auto;
  text-align: start;
  .block {
    display: flex;
    align-items: center;
    img {
      width: 220px;
      margin: 40px 130px;
    }
    .title {
      font-size: 40px;
    }
  }
}
</style>
